<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#lunbo{
				width: 790px;
				height: 340px;
				position: relative;
				overflow: hidden;
			}
			
			ul{
				width: 9999px;
			}
			
			ul li{
				width: 790px;
				height: 340px;
				float: left;
			}
			
			.btn{
				width: 24px;
				height: 36px;
				background: rgba(0,0,0,.7);
				color: #fff;
				text-align: center;
				line-height: 36px;
				position: absolute;
				cursor: pointer;
			}
			
			.left{
				top: 152px;
				left: 0;
			}
			
			.right{
				top: 152px;
				right: 0;
			}
			
			.ul_tran{
				transition: all 500ms linear;
			}			
			
			.circle{
				font-size: 0px;
				position: absolute;
				bottom: 10px;
				left: 50%;
				margin-left: -21px;
			}
			
			.circle li{
				width: 12px;
				height: 12px;
				background: orange;
				border-radius: 50%;
				border: 1px solid white;
				display: inline-block;
				cursor: pointer;
			}
			
			.circle li:first-child{
				background: white;
			}
		</style>
	</head>
	<body>
		<div id="lunbo">
			<div class="btn left">
				&lt;
			</div>
			<ul id="lunbo_ul" class="ul_tran">
				<li>
					<img src="img/1.jpg" alt="" />
				</li>
				<li>
					<img src="img/2.jpg" alt="" />
				</li>
				<li>
					<img src="img/3.jpg" alt="" />
				</li>
			</ul>
			<div class="btn right">
				&gt;
			</div>
			<ul class="circle">
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<!--<script>
			//按钮
			var leftBtn = document.querySelector('.left');
			var rightBtn = document.querySelector('.right');
			//轮播的ul li 
			var lunbo_ul = document.getElementById('lunbo_ul');
			lunbo_ul.style.marginLeft = -790 + 'px';
			var li = lunbo_ul.getElementsByTagName('li');
			//克隆第一张图
			var li_clone = li[0].cloneNode(true);
			lunbo_ul.appendChild(li_clone);
			var index = 1; //当前的下标
			var isClick = true;
			var lunbo = document.querySelector('#lunbo');
			//向右切换图片
			var liW = li[0].offsetWidth;
			
			var circle = document.querySelector('.circle');
			var li_circle = circle.getElementsByTagName('li');
			
			function toRight () {				
				if (isClick){
					isClick = !isClick;
					index++;
					if ( !lunbo_ul.classList.contains('ul_tran') ){
						lunbo_ul.classList.add('ul_tran') 
					}
					//maginLeftt left translateX
					
					//第0 张 marginleft = 0 ,第1张 marginleft = liw*1..
					lunbo_ul.style.marginLeft = (-liW * index) + 'px'; 
					
				}
				console.log(index);
			}
			
			
			var li_clone2 = li[2].cloneNode(true);
			lunbo_ul.insertBefore(li_clone2,li[0]);
			//向左切换图片
			function toLeft () {
				if (isClick){
					isClick = !isClick;
					index--;
					if ( !lunbo_ul.classList.contains('ul_tran') ){
						lunbo_ul.classList.add('ul_tran') 
					}
					//maginLeftt left translateX
					//第0 张 marginleft = 0 ,第1张 marginleft = liw*1..
					lunbo_ul.style.marginLeft = (-liW * index) + 'px'; 
					
				}
				console.log(index);
			}
			
			//动画结束触发
			lunbo_ul.addEventListener('transitionend', function () {
				//重置轮播的位置和下标
				if ( index == li.length -1){
					lunbo_ul.classList.remove('ul_tran');
					lunbo_ul.style.marginLeft = '-790px';
					index = 1;
				}
				
				if ( index == 0){
					lunbo_ul.classList.remove('ul_tran');
					lunbo_ul.style.marginLeft = '-2370px';
					index = 3;
				}
				isClick = true;
			});
			var stop;
			stop = setInterval(function () {
				rightBtn.click();
			},2000);
			
			lunbo.addEventListener('mouseover', function (){
				clearInterval(stop);
			});
			
			lunbo.addEventListener('mouseout', function (){
				stop = setInterval(function () {
				rightBtn.click();
				},2000);
			});
			


		console.log(li.length);
		</script>-->
		
		<script>
			//构造轮播图的function  --->constructor
			
			function Carousel (Id) {
				this.name = Id;
				this.DOM = document.getElementById(Id);				
				this.leftBtn = this.DOM.querySelector('.left');
				this.rightBtn = this.DOM.querySelector('.right');
				this.lunbo_ul = this.DOM.querySelector('#lunbo_ul');
				this.li = lunbo_ul.getElementsByTagName('li');
				this.liW = this.li[0].offsetWidth;
				this.circle = this.DOM.querySelector('.circle');
				this.li_circle = this.circle.getElementsByTagName('li');
				this.index = 1; //当前的下标
				this.isClick = true;
				this.stop;
				Carousel.prototype.init = function () {
					var that = this; //指针 保存this的内容
					var li_clone = this.li[0].cloneNode(true);
					this.lunbo_ul.appendChild(li_clone);
					var li_clone2 = this.li[2].cloneNode(true);
					this.lunbo_ul.insertBefore(li_clone2,this.li[0]);
					this.lunbo_ul.style.marginLeft = -790 + 'px';
					this.leftBtn.addEventListener('click', function () {
						if (that.isClick){
						that.isClick = !that.isClick;
						that.index--;
						if ( !that.lunbo_ul.classList.contains('ul_tran') ){
							that.lunbo_ul.classList.add('ul_tran') 
						}
						//maginLeftt left translateX
						//第0 张 marginleft = 0 ,第1张 marginleft = liw*1..
						that.lunbo_ul.style.marginLeft = (-that.liW * that.index) + 'px'; 								
						}
					});
					this.rightBtn.addEventListener('click', function () {
						if (that.isClick){
							that.isClick = !that.isClick;
							that.index++;
							if ( !that.lunbo_ul.classList.contains('ul_tran') ){
								that.lunbo_ul.classList.add('ul_tran') 
							}
							//maginLeftt left translateX
						
							//第0 张 marginleft = 0 ,第1张 marginleft = liw*1..
							that.lunbo_ul.style.marginLeft = (-that.liW * that.index) + 'px'; 
						}
					});
					
					this.lunbo_ul.addEventListener('transitionend', function () {
						//重置轮播的位置和下标
						if ( that.index == that.li.length -1){
							that.lunbo_ul.classList.remove('ul_tran');
							that.lunbo_ul.style.marginLeft = '-790px';//不要使用具体数值
							that.index = 1;
						}
						
						if ( that.index == 0){
							that.lunbo_ul.classList.remove('ul_tran');
							that.lunbo_ul.style.marginLeft = '-2370px';//不要使用具体数值  
							that.index = 3;
						}
						that.isClick = true;
					});
					
					this.stop = setInterval(function () {
							that.rightBtn.click();
						},2000);
						
						this.DOM.addEventListener('mouseover', function (){
							clearInterval(that.stop);
						});
			
						this.DOM.addEventListener('mouseout', function (){
							stop = setInterval(function () {
							that.rightBtn.click();
							},2000);
						});
					
				}
			}
			
			
			var car = new Carousel('lunbo');
			car.init();
		
		</script>
	</body>
</html>
